<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RadioButtonSample</title>
</head>
<body>

<style>
    .radio-1{
        width: 980px;
        margin: 0 auto;
        padding: 3% 0;
        background-color: #FFFFFF;
        text-align: center;
    }
    .radio-1 input{
        display: none;
    }

    .radio-1 label{
        align-content: center;
        position: relative;
        color: #24A9E1;
        background-color: #FFFFFF;
        border: 2px solid #24A9E1;
        padding: 5px 25px 5px 25px;
        margin-left: 10px;
        border-radius: 10px;
        cursor: pointer;
    }

    .radio-1 input:checked+label:after{
        transform: scale(1);
        transition: all .2s ease-in;
    }
    .radio-1 input:checked+label{
        background-color: #24A9E1;
        color: #FFFFFF;
        transition: all .2s ease-out;
    }
</style>

<div class="radio-1">
    <input type="radio" name="radio-1" id="radio-1-1" checked="checked">
    <label for="radio-1-1">111</label>

    <input type="radio" name="radio-1" id="radio-1-2">
    <label for="radio-1-2">222</label>

    <input type="radio" name="radio-1" id="radio-1-3">
    <label for="radio-1-3">333</label>
</div>
</body>
</html>